<!--
 * @Descripttion: 预览
 * @Author: yansu
 * @Date: 2020-09-22 13:36:33
 * @LastEditors: yansu
 * @LastEditTime: 2020-11-20 11:49:56
-->
<template>
    <div class="wrap">
        <el-row class="top">
            <el-col  :span="18" style="margin-top :10px">
                <span class="back" @click="back"><i class="el-icon-back"></i></span>
                <span class="text">预览  </span>
                <!-- <span class="name"> / {{previewData.name}}</span> -->
            </el-col>
            <el-col class="btn" :span="6">
                <el-button type="primary" @click="useThis"  v-if="showBtn">使用此话术</el-button>
            </el-col>
            <el-col>
                <div class="content">
                    <div class="process" v-for="(item,index) in nodeList" :key="item.id"  >
                        <div class="contentList" :class="{'current':currentIndex === index}" :title="item.title" @click="selectProcess(item,index)" >
                            {{item.title}}
                            <!-- <div class="logo" v-if="item.success">
                                <i class="el-icon-check"></i>
                            </div> -->
                        </div> 
                        <div class="line" v-if="index !== nodeList.length - 1">
                            <span></span>
                            <i></i>
                        </div>
                    </div>
                    <el-divider></el-divider>
                </div>
            </el-col>
        </el-row>
        <div class="recommend" v-for="(item,index) in recommendList" :key="index" >
            <div class="recommend_content" v-html="item.value" v-if="item.value"></div>
            <!-- <div class="logo">
                <i class="el-icon-check"></i>
            </div> -->
        </div>
    </div>
</template>
<script>
import { deepClone } from '@/utils/m7Utils.js'
export default {
    props:{
        previewData:{
            type:Object,
            required:true
        },
        showBtn:Boolean
    },
    data(){
        return {
            currentIndex:0,
            recommendList:[]
        }
    },
    methods:{
        back(){
            this.$emit ('back');
            this.currentIndex = ''
        },
        useThis(){
            this.$emit('useThis')
        },
        selectProcess(item,index){
            console.log(item);
            this.currentIndex = index;
            this.recommendList = this.nodeList[index].question?this.nodeList[index].question:[]
        }
    },
    computed:{
        //根据linkDataArray的对应关系，把nodeDataArray的顺序重新排列
        nodeList(){
            let linkRelation = [];
            let node = deepClone(this.previewData.talk_flow.nodeDataArray) ;
            let relation = deepClone(this.previewData.talk_flow.linkDataArray);
            relation.forEach((item,index)=>{
                linkRelation.push(item.to)
            })
            console.log(linkRelation,'关系数组');
            node.sort(function(a,b){
                return linkRelation.indexOf(a.key) - linkRelation.indexOf(b.key)
            })
            let arr =  node.map(function(a){
                return a;
            });
            console.log(arr);
            return arr
            // return this.previewData.talk_flow.nodeDataArray
        }
    },
    watch:{
        previewData:{
            handler(val){
                console.log(val);
            },
            immediate:true
        }
    }
}
</script>

<style lang="stylus" scoped>
.wrap{
    position relative
    .top{
        position sticky
        top 0
        background white
        .btn{
            text-align right;
            .el-button{
                line-height 30px;
                margin 0 15px;
                padding 0 20px
            }
        }
        .back{
            display inline-block;
            height:20px;
            width: 20px;
            border: 1px solid #4C97DB;
            border-radius: 50%;
            text-align:center;
            line-height 20px;
            font-size 14px;
            color #4C97DB;
            margin-right 10px;
            cursor pointer
        }
        .text{
            font-size 14px;
            color #979495
        }
        .name{
            font-size 14px
        }
    }
    .content{
        display flex;
        flex-wrap wrap;
        margin 10px 0;
        .process{
            display flex;
            place-items center;
            margin 5px 0
            .contentList{
                height 30px;
                line-height 30px;
                border 1px solid #E9EBED;
                font-size 14px;
                text-align center;
                font-weight 600;
                position relative;
                cursor pointer;
                border-radius 4px;
                width 90px;
                padding 0 10px;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap
                margin 5px 0
                &.publish{
                    border-color #459BEA;
                    color #459BEA
                }
                &.current{
                    background #459BEA;
                    color white;
                    .logo{
                        background white;
                        color #459BEA
                    }
                }
            }
            .line{
                height 36px;
                width 35px;
                display flex;
                align-items center;
                padding 0 5px;
                span{
                    width:100%;
                    border-top 2px solid #9B989C
                }
                i{
                    width 0;
                    height 0;
                    border:6px solid transparent;
			        border-left-color:#9B989C;
                }
                
            }
            .logo{
                width 15px;
                height 15px;
                background #459BEA;
                color white;
                text-align center;
                line-height 15px;
                border-radius 50%;
                position absolute;
                bottom 3px;
                right 3px
            }
            &.arrow{
                border none;
                .logo{
                    display none;
                }
            }
        }
    }
    .recommend{
        display flex;
        place-items center;
        .recommend_content{
            line-height 36px;
            font-size 14px;
            border 1px solid #E9EBED;
            margin 8px 0;
            padding 0 15px;
            border-radius 5px;
            width 95%
        }
        .logo{
            width 15px;
            height 15px;
            background #459BEA;
            color white;
            text-align center;
            line-height 15px;
            border-radius 50%;
            margin-left 10px
        }
    }
}
</style>